<template>
  <div class="history">
    <div class="leftcontainer">
      <el-input
        placeholder="输入关键字进行过滤"
        class="realtimeInput"
        v-model="input"
      ></el-input>
      <el-tree
        :data="engineerTree"
        :props="props"
        @node-click="handleNodeClick"
        :filter-node-method="filterNode"
        ref="tree"
      ></el-tree>
    </div>
    <div class="rightcontainer">
      <div v-if="Object.keys(deviceInfo).length == 0" class="notList">
        请选择设备查看
      </div>
      <div v-else class="container">
        <div class="deviceName">{{ deviceName }}现场情况</div>
        <video :src="deviceInfo.video" controls class="deviceVideo"></video>
      </div>
    </div>
  </div>
</template>

<script>
import { get, postJSON, del } from "@/utils/request.js";

export default {
  data() {
    return {
      engineerTree: [],
      props: {
        // value: "id",
        label: "name",
        children: "children",
      },
      value: [],
      input: "",
      resData: {},
      params: {
        page: 1,
        pageSize: 15,
      },
      cellStyle: {
        height: "20px",
        fontSize: "12px",
      },
      engineerInfo: {},
      deviceInfo: {},
      deviceName: "",
    };
  },
  created() {
    this.getEngineer();
  },
  watch: {
    input(val) {
      this.$refs.tree.filter(val);
    },
  },
  methods: {
    //事件监听
    handleNodeClick(obj, node) {
      if (obj.engineer_id) {
        this.params.id = obj.id;
        this.deviceName = obj.name;
        this.getDeviceInfo();
      }
    },
    handleCurrentChange(page) {
      this.params.page = page;
      this.getDeviceHistory();
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    //网络请求
    getEngineer() {
      get("/engineer/findEngineerDeviceTree").then((res) => {
        this.engineerTree = res.data;
      });
    },
    getDeviceInfo() {
      get("/device/findDeviceDetail", this.params).then((res) => {
        this.deviceInfo = res.data;
        console.log(this.deviceInfo);
      });
    },
  },
};
</script>

<style>
.history {
  position: absolute;
  top: 0.5em;
  bottom: 0.5em;
  width: 100%;
  display: flex;
}
.leftcontainer {
  width: 250px;
  padding-right: 10px;
  margin-right: 10px;
  border-right: 1px solid #ddd;
}
.rightcontainer {
  flex: 1;
}
.realtimeInput {
  height: 50px;
}
.notList {
  width: 100%;
  padding-top: 50px;
  font-size: 20px;
  text-align: center;
  flex: 1;
}
.header {
  font-size: 18px;
  font-weight: 700;
}
.box-card {
  margin-top: 15px;
  width: 100%;
}
.container {
  position: relative;
  width: 100%;
  height: 100%;
}
.container .deviceName {
  position: absolute;
  font-size: 20px;
  font-weight: 700;
  top: 50px;
  left: 47%;
  transform: translateX(-50%);
}
video {
  width: 90%;
  height: 80%;
  position: relative;
  left: 50%;
  top: 10%;
  transform: translateX(-51%);
}
</style>